<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta charset="UTF-8">
		<title>优购优品网</title>
		<!-- <link rel="stylesheet" href="../css/themes/css/core.css">
    <link rel="stylesheet" href="../css/themes/css/icon.css">
    <link rel="stylesheet" href="../css/themes/css/home.css"> -->
		<link rel="stylesheet" type="text/css" href="../css/vant.css" />
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>

		<style>
			.content {
				background: #ffffff !important;
				height: 100%;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				position: relative;
			}

			.row {
				position: relative;
			}

			.row .img {
				width: 100px;
				height: 90px;
				border-radius: 4px;
				overflow: hidden;
				position: relative;
			}

			.row .img img {
				width: 100%;
				height: 100%;
			}

			.row .desc {
				position: absolute;
				top: 0;
				left: 100px;
				right: 0;
				bottom: 0;
				padding-left: 10px;
			}

			.row .desc .title {
				font-size: 14px;
				line-height: 20px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.row .desc .title .hot {
				color: #fff;
				background: #cd1b21;
				font-size: 12px;
				border-radius: 2px;
				margin-right: 5px;
				vertical-align: middle;
			}

			.row .desc .sub-title {
				font-size: 12px;
				color: #969799;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.row .desc .sub-title * {
				vertical-align: middle;
			}

			.my-navbar {
				background-color: #51d0d0 !important;
			}

			.van-search {
				background: transparent !important;
				padding: 0;
			}

			.van-nav-bar__title {
				margin: 0 10px 0 50px;
				max-width: none;
			}

			.van-nav-bar__left {
				height: 46px;
			}

			.van-dropdown-menu {
				height: 40px;
			}

			.van-popup {
				width: 80%;
				height: 100%;
			}

			.van-popup .filter-list {
				height: calc(100% - 44px);
				padding: 30px 0 20px 10px;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
			}

			.van-popup .filter-txt {
				line-height: 42px;
			}

			.van-popup .van-row {
				border-bottom: 1px solid #ebedf0;
				padding-bottom: 5px;
			}

			.van-popup .filter-condition {
				height: 26px;
				line-height: 26px;
				width: 80%;
				margin-bottom: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price {
				color: #cd1b21;
				font-size: 18px;
			}

			.tag {
				position: relative;
				overflow: hidden;
			}

			.tag>div {
				transform: scale(0.8);
				-webkit-transform-origin-x: 0;
				overflow: hidden;
				width: 128%;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.tag span {
				color: #cd1b21;
				border: 1px solid #ff6e73;
				font-size: 12px;
				border-radius: 2px;
				display: inline-block;
				line-height: 16px;
				padding: 0 2px;
				vertical-align: middle;
				margin-right: 4px;
				margin-bottom: 4px;
			}

			.van-cell {
				padding-right: 5px;
			}



			/* .van-search__content {
				border: 1px solid #cd1b21;
			} */

			.sq-m {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(255, 255, 255, 0.5);
			}

			.sq {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.sq img {
				position: absolute;
				left: 0;
				top: 0;
				width: 30px !important;
				height: 30px !important;
			}
		</style>


	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<!-- <van-nav-bar class="head head-index" title="商品列表" left-arrow @click-left="onClickLeft">
					<div slot="title" style="margin-top: 10px;">
						<form action="" style="margin-top:-3px;">
							<van-search placeholder="输入编码、品牌、品类、名称搜索" show-action v-model="filter.keyName" shape="round"
								@search="getList">
								<div slot="action" @click="showFilter = true">筛选</div>
							</van-search>
						</form>
					</div>
				</van-nav-bar> -->

				<div class="head head-index my-navbar">
					<div class="my-navbar-left-content" @click="onClickLeft">
						<van-icon name="arrow-left" size="20" color="#fff"></van-icon>
					</div>

					<div class="my-navbar-title-content">
						<van-search placeholder="输入编码、品牌、品类、名称搜索" show-action v-model="filter.keyName" shape="round"
							@search="getList">
							<div slot="action" @click="showFilter = true" style="color: #fff;">筛选</div>
						</van-search>
					</div>

					<!-- <div class="my-navbar-right-content">
						<van-icon name="shopping-cart-o" color="#fff" size="20px" @click="openCart"
							style="margin-right:6px"></van-icon>
						<span style="color: #fff;" @click="detailTypeList[activeKey].showFilter = true">筛选</span>
					</div> -->
				</div>


				<div class="body-no-bottom-index" style="flex: 1;overflow: auto;">
					<van-pull-refresh :disabled="loadingDisabled" v-model="refreshLoading" @refresh="onRefresh">
						<div class="content">
							<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
								@load="listOnLoad">

								<van-cell v-for="(item,index) in productList" @click="intoDetail(item)">
									<div class="row">
										<div class="img">
											<img v-lazy="shoppingMallServerIP + item.ThumbnailUrl160" />

										</div>
										<div class="desc">
											<div class="title"><span
													class="hot">{{item.BrandName}}</span>{{item.ProductName}}
											</div>
											<div class="tag">
												<div>
													<span v-for="tagItem in getTagArray(item)"
														v-if="tagItem && tagItem.indexOf('套餐') == -1">{{tagItem}}</span>
												</div>

											</div>
											<div class="price">
												<span style="font-size: 12px;" v-show="userInfo">￥</span><span
													v-show="userInfo">{{item.SalePrice}}</span>
												<span
													style="font-size: 12px;color: #9e9e9e;">{{item.VistiCounts}}人浏览过</span>
											</div>
										</div>

										<div class="sq-m" v-if="item.Stock <= 0">
											<div class="sq"><img src="../image/sq.png" /></div>
										</div>
									</div>
								</van-cell>
								<div v-show="!productList.length"
									style="font-size: 14px;color:#9e9e9e;text-align:center;padding: 20px 0;">暂无商品</div>
							</van-list>



						</div>
					</van-pull-refresh>
				</div>

			</div>

			<van-popup v-model="showFilter" position="right" :overlay="true" :lazy-render="false">
				<div class="filter-list">
					<div class="filter-txt">分类</div>
					<div>
						<van-row>
							<van-col span="8" v-for="(row,index) in types">
								<van-button size="mini" class="filter-condition"
									:type="getFilterColor(row.Value,filter.parentCategoryId1)"
									@click="toggleFilter(row.Value,'parentCategoryId1')">{{row.Name}}</van-button>
							</van-col>
						</van-row>
					</div>
					<div v-if="filter.parentCategoryId1 && filterSubTypes(1)">
						<div class="filter-txt">二级分类</div>
						<div>
							<van-row>
								<van-col span="8" v-for="(row,index) in subTypes"
									v-if="row.ParentValue == filter.parentCategoryId1">
									<van-button size="mini" class="filter-condition"
										:type="getFilterColor(row.Value,filter.parentCategoryId2)"
										@click="toggleFilter(row.Value,'parentCategoryId2')">{{row.Name}}</van-button>
								</van-col>
							</van-row>
						</div>
					</div>
					<div v-if="filter.parentCategoryId2 && filterSubTypes(2)">
						<div class="filter-txt">三级分类</div>
						<div>
							<van-row>
								<van-col span="8" v-for="(row,index) in subTypes"
									v-if="row.ParentValue == filter.parentCategoryId2">
									<van-button size="mini" class="filter-condition"
										:type="getFilterColor(row.Value,filter.categoryId)"
										@click="toggleFilter(row.Value,'categoryId')">{{row.Name}}</van-button>
								</van-col>
							</van-row>
						</div>
					</div>
					<div class="filter-txt">品牌</div>
					<div>
						<van-row>
							<van-col span="8" v-for="(row,index) in brands">
								<van-button size="mini" class="filter-condition"
									:type="getFilterColor(row.Value,filter.brandId)"
									@click="toggleFilter(row.Value,'brandId')">{{row.Name}}</van-button>
							</van-col>
						</van-row>
					</div>
					<div class="filter-txt">标签</div>
					<div>
						<van-row>
							<van-col span="8" v-for="(row,index) in tags" v-if="row.Name.indexOf('套餐') == -1">
								<van-button size="mini" class="filter-condition"
									:type="getFilterColor(row.Value,filter.tagId)"
									@click="toggleFilter(row.Value,'tagId')">
									{{row.Name}}</van-button>
							</van-col>
						</van-row>
					</div>
				</div>
				<div>
					<van-button type="primary" block style="border-radius: 0;" @click="getList">筛选</van-button>
				</div>
			</van-popup>

		</div>



	</body>

	<!-- 调用 uniapp webview 的 api ，记得需要写在 body 标签下面 -->
	<script src="../../../assets/script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		var vm;
		//$('.init-full').show();


		// var searchKey = window.localStorage.getItem('searchKey');
		var brandId = 0;
		// var brandId = api.pageParam.brandId;

		Vue.use(vant.Lazyload, {
			loading: '../image/no.png',
			error: '../image/no.png'
		});

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				loadingDisabled: false,
				refreshLoading: false,
				serverIP: 'http://' + FLD.serverIP,
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				listLoading: false,
				listFinished: true,
				showFilter: false,
				filter: {
					keyName: '',
					parentCategoryId1: 0,
					parentCategoryId2: 0,
					categoryId: 0,
					brandId: brandId || 0,
					tagId: 0,
					pageIndex: 1,
					pageSize: 20
				},
				productList: [],
				types: [],
				subTypes: [],
				brands: [],
				tags: [],
				userInfo: FLD.getUserInfo() || ''
			},
			created: function() {
				var that = this;

				var appTop = parseInt(window.localStorage.getItem('safeAreaTop'));

				if (appTop) {
					$('.head-index').css({
						'padding-top': appTop + 'px',
						'height': appTop + 50 + 'px',
						'line-height': '40px'
					})
				}

				// $('.body-no-bottom-index').css({
				// 	'height': 'calc(100% - ' + (appTop + 50) + 'px)'
				// }) 

				if (window.localStorage.getItem('searchKey')) {
					that.filter.searchKey = window.localStorage.getItem('searchKey');

					setTimeout(() => {
						that.getList();

						that.getTypes();

						that.getBrands();

						that.getTags();
					}, 50)
				} else if (window.localStorage.getItem('FormIndex')) {

					that.getList();

					that.getTypes();

					that.getBrands();

					that.getTags();

					window.localStorage.removeItem('FormIndex')
				}
			},
			methods: {
				GetSearchKey(data) { // 获取搜索栏的数据
					var that = this;
					// console.log(JSON.parse(data).searchKey);
					that.filter.keyName = JSON.parse(data).searchKey;

					window.localStorage.setItem('searchKey', JSON.parse(data).searchKey)

					that.getList();

					that.getTypes();

					that.getBrands();

					that.getTags();
				},
				onRefresh() {
					var that = this;
					that.refreshLoading = true;
					that.getList();
				},
				getList() {
					var that = this;
					that.showLoading = true;
					that.showFilter = false;
					that.filter.pageIndex = 1;
					FLD.ajax('sp_searchProducts', that.filter, function(res) {
						that.showLoading = false;
						that.refreshLoading = false;
						that.listFinished = false;
						that.productList = res.ds;
					})
				},
				listOnLoad(row) {
					var that = this;
					that.filter.pageIndex++;
					FLD.ajax('sp_searchProducts', that.filter, function(res) {
						that.listLoading = false;
						if (res.ds.length == 0) {
							that.listFinished = true;
						}
						that.productList = that.productList.concat(res.ds);
					})
				},
				filterSubTypes(index) {
					var that = this;
					if (index == 1) {
						var n = that.subTypes.filter(function(item) {
							return item.ParentValue == that.filter.parentCategoryId1;
						});
						return n.length;
					} else {
						var n = that.subTypes.filter(function(item) {
							return item.ParentValue == that.filter.parentCategoryId2;
						});
						return n.length;
					}

				},
				getTypes() {
					var that = this;
					FLD.ajax('sp_allProductType', {}, function(res) {
						that.types.push({
							Name: '所有',
							Value: 0
						})
						for (var i in res.ds) {
							if (res.ds[i].ParentCategoryId == 0) {
								that.types.push({
									Name: res.ds[i].Name,
									Value: res.ds[i].CategoryId
								})
							} else {
								that.subTypes.push({
									Name: res.ds[i].Name,
									Value: res.ds[i].CategoryId,
									ParentValue: res.ds[i].ParentCategoryId
								})
							}

						}
					})
				},
				getBrands() {
					var that = this;
					FLD.ajax('sp_getBrand', {}, function(res) {
						that.brands.push({
							Name: '所有',
							Value: 0
						})
						for (var i in res.ds) {
							that.brands.push({
								Name: res.ds[i].BrandName,
								Value: res.ds[i].BrandId
							})

						}
					})
				},
				getTags() {
					var that = this;
					FLD.ajax('sp_productTags', {}, function(res) {
						that.tags.push({
							Name: '所有',
							Value: 0
						})
						for (var i in res.ds) {
							that.tags.push({
								Name: res.ds[i].TagName,
								Value: res.ds[i].TagID
							})

						}
					})
				},
				getFilterColor(name, value) {
					var that = this;
					if (name == value) {
						return 'primary';
					} else {
						return 'default';
					}
				},
				toggleFilter(name, value) {
					var that = this;
					that.filter[value] = name;
					if (value == 'parentCategoryId1') {
						var n = that.subTypes.filter(function(item) {
							return item.ParentValue == that.filter.parentCategoryId1;
						});
						if (n.length) {
							that.filter.parentCategoryId2 = n[0].Value;
						}

						var m = that.subTypes.filter(function(item) {
							return item.ParentValue == that.filter.parentCategoryId2;
						});
						if (m.length) {
							that.filter.categoryId = m[0].Value;
						} else {
							that.filter.categoryId = n[0].Value;
						}

					}
					if (value == 'parentCategoryId2') {
						var n = that.subTypes.filter(function(item) {
							return item.ParentValue == that.filter.parentCategoryId2;
						});
						if (n.length) {
							that.filter.categoryId = n[0].Value;
						}

					}
				},
				getTagArray(item) {
					var that = this;
					if (!item.TagNames) {
						return [];
					} else {
						return item.TagNames.split(',');
					}

				},
				intoDetail(row) {
					var that = this;

					window.localStorage.setItem('FormIndex', 1)

					window.localStorage.setItem('productData', JSON.stringify(row))
					window.localStorage.setItem('stepIndex', JSON.stringify(1))
					window.location.href = './product.html';
				},
				onClickLeft() {
					// api.closeWin();
					uni.navigateBack()
					window.localStorage.removeItem('searchKey');
					// window.history.back();
				}
			}
		})
	</script>

</html>